const { defineConfig } = require('@vue/cli-service')
/**
 * 环境变量（node）：
 * 1、生产环境(本机服务器)  npm run serve =》标识： process.env.NODE_ENV=development
 *
 * 2、生产（线上）环境： npm run build =>标识 process.env.NODE_ENV= production
 */

console.log('环境标识', process.env.NODE_ENV)

// 排除的大文件对象配置
let externals = {}
// cdn js文件的链接
let cdn = { js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
    vue: 'Vue',
    'element-ui': 'ELEMENT',
    echarts: 'echarts'
  }

  // 排除之后需要引入到页面的cnd js脚本链接
  cdn = {
    js: [

      // vue js must at first!
      'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js',
      // element-ui js
      'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/index.min.js',
      // echarts js
      'https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js'
    ]
  }
}

module.exports = defineConfig({
  transpileDependencies: true,
  // 既让elint 检查格式 ，有格式问题不会造成编译报错
  lintOnSave: true,
  publicPath: './',
  // 打包的时候，不生成sourMap 文件， 能在线调试js的代码，也就是能调试源代码
  productionSourceMap: !isProduction,
  // 排除大文件
  configureWebpack: {
    // ---------------测试模式   -------------
    // externals: {
    //   // js版本中window全局的成员名称
    //   vue: 'Vue',
    //   'element-ui': 'ELEMENT',
    //   echarts: 'echarts'
    // }

    // ---------------实际开发模式- 注入CDN    -------------
    externals

  },
  chainWebpack (config) {
    // 注入cdn变量 (打包时会执行)，注入html中
    config.plugin('html').tap(args => {
      args[0].cdn = cdn // 配置cdn给插件
      return args
    })
  }

})
